
<template>
   <div class="com-container">
        <xszk-header 
            :isLoginShow="isLoginShow"
            @onLogin="isLoginShow=true"
            @onClose="isLoginShow=false"
        ></xszk-header>
        <!-- 搜索 -->
        <div class="index-label">
            <div class="index-main">
                <div class="seach-warp fl">
                    <el-select 
                        v-model="seachSelectVal"
                        class="seacher-select no-popper-arrow fl"
                        :popper-append-to-body="false"
                        @change="seachChange"
                        value-key="_id"
                    >
                        <el-option
                            v-for="item in classList"
                            :key="item._id"
                            :label="item.name"
                            :value="item"
                        ></el-option>
                    </el-select>
                    <div class="line-gap fl"></div>
                    <el-dropdown class="dropdown-data" @command="handleCommand" :hide-on-click="false" trigger="click">
                        <input type="text" v-model.trim="seachKey" placeholder="多维度跨库搜索，点击输入" class="seach-input fl">
                        <el-dropdown-menu slot="dropdown" class="seacher-data no-popper-arrow" :class="{'hidden-popper':searchHistory.length==0}">
                            <template v-if="searchHistory.length!=0">
                                <el-dropdown-item
                                    v-for="(item,index) in searchHistory"
                                    :key="index"
                                    :command="item.name"
                                >
                                    <div class="flex ali-c jus-b fs18">
                                        <div class="oneline">{{item.name}}</div>
                                        <button class="fs18 ctheme ml30 fs0" @click.stop="delHistory(item,index)">删除</button>
                                    </div>
                                </el-dropdown-item>
                                <div class="fs13 cp mt10 ml20" style="color:#284AA2" @click="delAllHistory">清除历史</div>
                            </template>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <img src="@/static/images/seach_icon.png" class="seach-icon cp fr" @click="quickSearch">
                </div>
                <button class="seach-btn bgfff fl quick-sea" style="margin-left:36px" @click="quickSearch">快速检索</button>
                <button class="seach-btn cfff bgtheme fl" @click="isSeaPopShow=true">高级检索</button>
                <div class="clear"></div>
                <div class="mt25 flex ali-c">
                    <el-radio-group v-model="highData.scopeList[0].type" class="index-radio">
                        <el-radio label="all">标题或全文</el-radio>
                        <el-radio label="title">标题</el-radio>
                        <el-radio label="text">全文</el-radio>
                        <el-radio label="keyword">关键词</el-radio>
                    </el-radio-group>
                    <div class="radio-line"></div>
                    <el-radio-group v-model="highData.scopeList[0].mode" class="index-radio">
                        <el-radio label="exact">精确结果</el-radio>
                        <el-radio label="fuzzy">模糊结果</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <div class="index-main">
            <!-- nav -->
            <div class="nav-label">
                <ul class="nav-list flex ali-c jus-b">
                    <li
                        v-for="(item,index) in classList.slice(1,9)"
                        :key="index"
                        @click="toListPage(item)"
                    >   
                        <div class="start-cont">
                            <img :src="item.img_src" >
                            <h3 class="fs20">{{item.name}}</h3>
                        </div>
                        <div class="end-cont">
                            <h3 class="fs18">{{item.name}}</h3>
                            <div class="line"></div>
                            <p class="fs16 twoline" style="font-family:SimSun;">{{item.abs}}</p>
                        </div> 
                    </li>
                </ul>
            </div>
            <!-- 经典套系 -->
            <div class="flex ali-c jus-b" style="margin-top:64px">
                <h3 class="com-title">经典套系</h3>
                <router-link to="/serTopics" class="fs16 c999 fs0 com-hover">查看更多<i class="el-icon-arrow-right ml5"></i></router-link>
            </div>
            <div class="classic-wrap">
                <div 
                    class="flex jus-b"
                    v-for="(item,index) in getClassicDescList"
                    :key="index"
                >
                    <div class="classic-left">
                        <img src="@/static/images/class_label.png" class="classic-img">
                        <!-- <img :src="item.books_info.img_src?item.books_info.img_src:initImg" class="classic-img"> -->
                    </div>
                    <div class="classic-right">
                        <h3 class="right-title com-hover" @click="toSerIntroducePage(item)">{{item.books_info.name}}</h3>
                        <ul class="right-list">
                            <li>
                                <h3 class="right-list-tit fs20 oneline">全面收录最高人民法院《刑事审判参考》</h3>
                                <p class="fs16 c999 oneline mt10">二十年典藏资源全库收录，审判典范倾力诚献</p>
                            </li>
                            <li>
                                <h3 class="right-list-tit fs20 oneline">垂直内容资源深度关联</h3>
                                <p class="fs16 c999 oneline mt10">多维度多层级拆解，深度解析</p>
                            </li>
                            <li>
                                <h3 class="right-list-tit fs20 oneline">精确智能速查权威类案</h3>
                                <p class="fs16 c999 oneline mt10">快速高效定位所需资源，想您所想</p>
                            </li>
                        </ul>
                        <img src="@/static/images/index_fen1.png" class="classic-fen1">
                        <img src="@/static/images/index_fen2.png" class="classic-fen2">
                    </div>
                </div>
            </div>
            <!-- 热点资源 -->
            <h3 class="com-title" style="margin-top:64px">热点资源</h3>
            <ul class="hot-list flex ali-c jus-b flex-wrap">
                <li 
                    v-for="(item,index) in getHotNewList"
                    :key="index"
                >   
                    <div class="list-cont">
                        <h3 class="fs18 oneline" @click="toPubDetails(item)">{{item.book_info.name}}</h3>
                        <div class="mt20 flex ali-c jus-b">
                            <div class="fs14">类别：{{item.book_info.tag}}</div>
                            <div class="fs16 c666">发布时间：{{item.book_info.update_time}}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <xszk-high-search
            :isPopShow="isSeaPopShow"
            :currId="seachCurrClass._id"
            @cancelPop="isSeaPopShow=false"
            @comfirmPop="comfirmSeaPop"
        ></xszk-high-search>
        <xszk-fixedTool></xszk-fixedTool>
    </div>
</template>

<script>
export default {
    name: "index",
    components:{
        xszkHeader: (resolve) =>require([ "@/components/xszkHeader",], resolve),
        xszkFixedTool: (resolve) =>require([ "@/components/xszkFixedTool",], resolve),
        xszkHighSearch: (resolve) =>require([ "@/components/xszkHighSearch",], resolve),
    },
    computed: {
        searchHistory: {
            get() {
                return this.$store.getters.searchHistory;
            },
            set(val) {},
        },
        token(){
            return this.$store.getters.token;
        },
        oriClassList(){
            return this.$store.getters.oriClassList;
        },
        classList(){
            return this.$store.getters.classList;
        },
    },
    data() {
        return {
            isLoginShow:false,
            initImg: require('@/static/images/classic_img.png'),
            seachSelectVal:'全部',
            seachKey:'',
            seachCurrClass:{name:"全部",_id:"all",pid:'root'},
            seachVague:1,
            navList: [],
            getClassicDescList:[],
            getHotNewList:[],
            isSeaPopShow:false,
            highData:{
                scopeVal:'and',
                scopeList:[
                    {type:'all',value:'',mode:'exact'},
                ],
                classId:'all',
                radioVal:'all',
                author:'',
                local:'',
                time:'',
                source:''
            },
        };

    },
    methods: {
        setSearchHistory(val){
            this.$store.dispatch("setSearchHistory", val);
        },
        handleCommand(name){
            this.seachKey = name;
            this.quickSearch();
        },
        seachChange(value){
           this.seachSelectVal = value.name;
           this.seachCurrClass = value;
           this.highData.classId = value._id;
        },
        comfirmSeaPop(popForm){
            this.highData = this.stringutils.deepClone(popForm);
            this.isSeaPopShow = false;
            this.$router.push({
                path:'/list',
                query: {id:popForm.classId,highData:JSON.stringify(popForm)}
            })
        },
        quickSearch(){
            if(!this.seachKey){
                this.toast.info("请输入搜索条件");
                return false;
            }
            this.highData.scopeList[0].value = this.seachKey;
            let getDate = this.moment(Date.now()).format('YYYY-MM-DD HH:mm:ss');
            let searchObj = {name:this.seachKey,time:getDate};
            this.searchHistory.push(searchObj);
            this.searchHistory = this.searchHistory.reverse(); //倒序
            //去除相同name的对象
            let currObj = {};
            let newSearchHistory = this.searchHistory.reduce((arr,next) => {
                currObj[next.name] ? "" : currObj[next.name] = true && arr.push(next);
                return arr;
            },[]) 
            this.setSearchHistory(newSearchHistory);
            this.$router.push({
                path:'/list',
                query: {id:this.seachCurrClass._id,highData:JSON.stringify(this.highData)}
            })
        },
        delHistory(item,index){
            this.searchHistory.splice(index,1);
            this.setSearchHistory(this.searchHistory);
        },
        delAllHistory(){
            this.setSearchHistory([]);
        },
        toPubDetails(item){
            this.$router.push({path:'/pubDetails',query: { productId:item.product_id}});
        },
        toListPage(item){
            this.$router.push({path:'/list',query: { id:item._id}});
        },
        toSerIntroducePage(item){
            this.$router.push({path:'/serIntroduce',query: {productId:item.product_id}});
        },
        //经典套系
        getClassicList(){
            let that = this;
            this.request.getClassicList({}, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    that.getClassicDescList = resData;
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        // 热点资源
        getCategorysList(currId){
            let that = this;
            let data = {
                category_id:currId,
            };
            this.request.getCategorysList(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    that.getHotNewList = resData.splice(0,4);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
       

    },
    created() {
        if(!this.token){
            this.stringutils.clearData();
        }
        this.getClassicList();
    },
    watch:{
        oriClassList:{
            handler(newVal,oldVal){
                if(newVal.length!=0){
                    newVal.forEach(item => {
                        if(item.name=='热点资源'){
                            this.getCategorysList(item._id);
                        }
                    });
                }
            },
            immediate:true,
            deep:true
        }
    }
};
</script>
<style lang="stylus" scoped>
.index-label
    width 100%
    height 300px
    background url('../../static/images/bg.png') no-repeat center
    background-size 100% 100%
    padding-top 64px 
    .seach-warp
        position relative
        width 772px
        height 64px
        line-height 64px
        background #FFFFFF
        box-shadow 0px 0px 5px 1px rgba(193, 210, 255, 0.5)
        border-radius 4px
        padding-right 30px
        border 1px solid #9EA6AF
        .line-gap
            width 2px
            height 100%
            background #ddd
        .seach-input
            display block
            width 78%
            height 62px
            flex-shrink 0
            font-size 18px
            margin-left -10px
        /deep/.seach-input::-webkit-input-placeholder 
            font-size 16px
        .seach-icon
            margin-top 17px
            width 30px
            height 30px
    .seach-btn
        margin-top 13px
        width 141px
        height 40px
        line-height 40px
        text-align center
        font-size 20px
        border 1px solid transparent 
        border-radius 4px
        margin-left 40px
        transition 0.2s
        cursor pointer
    .seach-btn:hover
        opacity 0.85
    .quick-sea:hover
        border-color #3266CC
        color #3266CC
    .radio-item
        cursor pointer
        font-size 14px
        margin-right 25px
    .radio-line
        flex-shrink 0
        width 1px
        height 20px
        background #979797
        margin-left 13px
        margin-right 30px
.nav-label
    margin-top -61px
    width 1129px
    min-height 160px
    background #FFFFFF
    box-shadow 0px 2px 4px 0px rgba(158, 166, 175, 0.5)
    border-radius 8px
    padding 25px 42px
    .nav-list li
        width 110px
        height 110px
        background #FFFFFF
        text-align center
        font-size 22px
        font-weight bolder
        cursor pointer          
        overflow hidden
        position relative
        img 
            display block
            margin 10px auto
            width 50px
            height 50px
        .start-cont
            border-radius 18px
            border 1px solid #E8C47B
            display block
            width 100%
            height 100%
        .end-cont
            position absolute
            left 0
            top 0
            color #333
            padding 15px 15px 5px 15px
            display none
            border-color transparent
            border-radius 18px
            width 100%
            height 100%
            background linear-gradient(119deg, rgba(171, 171, 171, 0.7) 0%, rgba(171, 171, 171, 0.4) 100%)
            box-shadow 0 1px 4px 0 rgba(229, 229, 229, 0.5)
            backdrop-filter blur(3px)
            .line
                width 100%
                height 1px
                background #333
                margin 8px auto 
    .nav-list li:hover .end-cont
        display block 
.classic-wrap
    margin-top 50px
    width 100%
    height 350px
    .classic-left
        width 484px
        height 350px
        line-height 350px
        text-align center
        overflow hidden
        .classic-img
            width 100%
            height auto
    .classic-right
        position relative
        width 646px
        padding-left 136px
        .right-title
            margin-left 85px
            margin-top 10px
            margin-bottom 64px
            font-size 28px
            width 270px
            height 40px
            line-height 46px
            padding 0 5px
            text-align center
            border-bottom 8px solid #E8C47B 
        .right-list li
            margin-top 24px
        .classic-fen1
            position absolute
            top 120px
            left 35px
            width 43px
            height 37px
            z-index 9
        .classic-fen2
            position absolute
            bottom 20px
            right 0
            width 43px
            height 37px
            z-index 9
.com-title
    width 100%
    height 33px
    padding-left 20px
    font-size 24px
    border-left 8px solid #E8C47B
.hot-list 
    width 100%
    height auto
    margin-top 30px 
.hot-list li
    width 50%
    height auto
    margin-bottom 45px
    overflow hidden
    cursor pointer
    .list-cont
        width 485px
        float left
.hot-list li:nth-child(2n) .list-cont
    float right
.hot-list li:hover h3
    color #E8C47B
.index-main
	width 1134px
	height auto
	margin 0 auto
</style>